<template>
	<view class="tab-bar flex-row-start">
		<view class="tab-bar-item flex-1 flex-column-between tc" v-for="(item, index) in list" :key="index" @click="goUrl(item)">
			<image class="tab-cover-img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
			<view class="tab-cover-txt" :style="{color:selected === index ? selectedColor : color}">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selected: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				color: "#1e1e1e",
				selectedColor: "#03004c",
				list: [{
						"pagePath": "/pages/xieyi/hotelList",
						"iconPath": require('@/static/ComTabBar/tab_a1.png'),
						"selectedIconPath": require('@/static/ComTabBar/tab_a2.png'),
						"text": "协议预定"
					},
					{
						"pagePath": "/pages/xieyi/orderList",
						"iconPath": require('@/static/ComTabBar/tab_b1.png'),
						"selectedIconPath": require('@/static/ComTabBar/tab_b2.png'),
						"text": "我的订单"
					},
					{
						"pagePath": "/pages/xieyi/contactList",
						"iconPath": require('@/static/ComTabBar/tab_c1.png'),
						"selectedIconPath": require('@/static/ComTabBar/tab_c2.png'),
						"text": "联系人"
					}
				]
			};
		},
		methods: {
			goUrl (e) {
				uni.reLaunch({
				    url: e.pagePath
				});
			}
		}
	}
</script>

<style scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 12;
		height: 110rpx;
		background: #faf9f9;
		border-top: 2rpx solid #eeeeee;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}
	.tab-bar-item {
		height: 110rpx;
		padding: 22rpx 0 18rpx 0;
	}

	.tab-cover-img {
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin: 0 auto;
	}

	.tab-cover-txt {
		font-size: 20rpx;
		line-height: 20rpx;
	}
</style>
